import {Style, Stroke, Fill, Text, Circle, Icon} from 'ol/style.js';
import * as olColorlike from 'ol/colorlike';

const Gstyle = {
  styleColorLineString: [
    'rgba(0,192,251,1)',
    'rgba(237,125,49,1)',
    'rgba(74,134,238,1)',
    'rgba(165,72,246,1)',
    'rgba(186,207,1,1)',
    'rgba(0,176,80,1)',
    '#eb4c4c',
    '#4e1fd3'
  ],
  styleColorPoint: [
    'rgba(0,192,251,1)',
    'rgba(237,125,49,1)',
    'rgba(74,134,238,1)',
    'rgba(165,72,246,1)',
    'rgba(186,207,1,1)',
    'rgba(0,176,80,1)',
    '#eb4c4c',
    '#4e1fd3'
  ],
  styleColorPolygonFill: [
    'rgba(78,31,211,0.3)',
    'rgba(26,89,228,0.3)',
    'rgba(23,131,237,0.3)',
    'rgba(37,178,178,0.3)',
    'rgba(245,234,0,0.2)',
    'rgba(237,125,49,0.3)',
    'rgba(255,0,0,0.3)',
    'rgba(53,58,255,0.3)',
    'rgba(172,255,9,0.3)',
    'rgba(0,128,0,0.3)'
  ],
  styleColorPolygonStroke: [
    '#4e1fd3',
    '#1a59e4',
    '#1783ed',
    '#25b2b2',
    '#f5af19',
    '#ff7b23',
    'rgba(255,0,0,1)',
    'rgba(53,58,255,1)',
    'rgb(221,255,11)',
    'rgba(0,128,0,1)'
  ],
  styleColor: [
    "#DAA520",
    "#808080",
    "#008000",
    "#ADFF2F",
    "#F0FFF0",
    "#FF69B4",
    "#CD5C5C",
    "#4B0082",
    "#FFFFF0",
    "#F0E68C",
    "#E6E6FA",
    "#FFF0F5",
    "#7CFC00",
    "#FFFACD",
    "#ADD8E6",
    "#F08080",
    "#E0FFFF",
    "#FAFAD2",
    "#D3D3D3",
    "#90EE90",
    "#FFEBCD",
    "#0000FF",
    "#8A2BE2",
    "#A52A2A",
    "#DEB887",
    "#5F9EA0",
    "#7FFF00",
    "#D2691E",
    "#FF7F50",
    "#6495ED",
    "#FFF8DC",
    "#DC143C",
    "#00FFFF",
    "#00008B",
    "#008B8B",
    "#B8860B",
    "#A9A9A9",
    "#006400",
    "#BDB76B",
    "#8B008B",
    "#556B2F",
    "#FF8C00",
    "#9932CC",
    "#8B0000",
    "#E9967A",
    "#8FBC8F",
    "#483D8B",
    "#2F4F4F",
    "#00CED1",
    "#9400D3",
    "#FF1493",
    "#00BFFF",
    "#696969",
    "#1E90FF",
    "#D19275",
    "#B22222",
    "#FFFAF0",
    "#228B22",
    "#FF00FF",
    "#DCDCDC",
    "#F8F8FF",
    "#FFD700",
    ],
  isJSON: function (str) {
    if (!str){
      return false;
    }
    if (typeof str == 'string') {
      try {
        var obj = JSON.parse(str);
        if (typeof obj == 'object' && obj) {
          return true;
        } else {
          return false;
        }

      } catch (e) {
        console.log('error：' + str + '!!!' + e);
        return false;
      }
    }
    console.log('It is not a string!')
  },
  pntStyle: function () {
    return new Style({
      image: new Circle({
        radius: 10,
        fill: new Fill({
          color: '#ffff00',
        }),
        stroke: new Stroke({
          color: '#fff',
          width: 1
        })
      })
    });
  },
  fillStyle: function () {
    return new Style({
      stroke: new Stroke({
        color: '#fff',
        width: 2
      }),
      fill: new Fill({
        color: [38, 155, 0, 0.3]	//使用了一个数组，[r,g,b,a]
      })
    });
  },
  feature_hide: (feature) => {
    return new Style({})
  },
  station: function (feature) {
    const {id, count, type} = feature.getProperties();
    let strokeColor = '#00ff00';
    if (type == 'right_count') {
      strokeColor = '#ff0000';
    }
    return new Style({
      image: new Circle(({
        radius: 12,//半径
        fill: new Fill({//圆填充色
          color: '#ffffff'
        }),
        stroke: new Stroke({//圆边线样式
          color: strokeColor,
          width: 2
        })
      })),
      text: new Text({
        font: 'normal 11px Microsoft YaHei',
        text: count,
        fill: new Fill({color: '#000000'}),
        textAlign: 'center',
      }),
    })
  },
  line: function (feature) {
    const {type, name} = feature.getProperties();
    let strokeColor = '#00ff00';
    if (type == 'right_count') {
      strokeColor = '#ff0000';
    }
    return new Style({
      stroke: new Stroke({//圆边线样式
        color: strokeColor,
        width: 4
      }),
      text: new Text({
        font: 'normal 11px Microsoft YaHei',
        text: name,
        fill: new Fill({color: '#000000'}),
        textAlign: 'center',
      }),
    })
  },
  line_hover: function (feature) {
    const {type, name} = feature.getProperties();
    let strokeColor = '#ff00ff';
    return new Style({
      stroke: new Stroke({//圆边线样式
        color: strokeColor,
        width: 5
      }),
      text: new Text({
        font: 'normal 11px Microsoft YaHei',
        text: name,
        fill: new Fill({color: '#000000'}),
        textAlign: 'center',
      }),
    })
  },
  station_hover: function (feature) {
    const {id, count, type} = feature.getProperties();
    // let strokeColor = '#ff00ff';
    let strokeColor = '#10dddb';
    return new Style({
      image: new Circle(({
        radius: 12,//半径
        fill: new Fill({//圆填充色
          color: '#ffffff'
        }),
        stroke: new Stroke({//圆边线样式
          color: strokeColor,
          width: 3
        })
      })),
      text: new Text({
        font: 'normal 11px Microsoft YaHei',
        text: count,
        fill: new Fill({color: '#000000'}),
        textAlign: 'center',
      }),
    })
  },
  pointermove_style: function (feature) {
    const {geometry} = feature.getProperties();
    let strokeColor = '#ff00ff';
    var style;
    switch (geometry.getType()) {
      case 'Polygon':
        style = new Style({
          fill: new Fill({
            color:  'rgba(248,248,255,0.5)',
          }),
          stroke: new Stroke({
            color: strokeColor,
            width: 3
          })
        });
        break;
      case 'MultiPolygon':
        style = new Style({
          fill: new Fill({
            color: 'rgba(248,248,255,0.5)',
          }),
          stroke: new Stroke({
            color: strokeColor,
            width: 3
          })
        });
        break;
      case 'LineString':
        style = new Style({
          stroke: new Stroke({
            color: strokeColor,
            width: 3
          })
        });
        break;
      default :
        style = new Style({
          image: new Circle(({
            radius: 5,//半径
            fill: new Fill({//圆填充色
              color: 'rgba(248,248,255,0.5)',
            }),
            stroke: new Stroke({//圆边线样式
              color: strokeColor,
              width: 3
            })
          }))
        });
        break;
    }
    return style;
  },
  styleDefault: function (type) {
    var defaultStyle = new Style({
      image: new Circle({
        radius: 5,
        fill: new Fill({
          color: 'rgba(191,217,255,1)',
        }),
        stroke: new Stroke({ //边界样式
          color: 'rgb(3,152,209)',
          width: 1
        })
      })
    });
    return defaultStyle;
  },
  styleCacheIndexPoint: function (styles,classify) {
    if (!Gstyle.isJSON(styles)){
      return new Style({
        image: new Circle({
          radius: 5,
          fill: new Fill({
            color: Gstyle.styleColor[classify]
          }),
          stroke: new Stroke({ //边界样式
            color: Gstyle.styleColor[classify+1],
            width: 2
          })
        })
      });
    }
    styles = JSON.parse(styles);
    var pointStyles = new Style({
      image: new Circle({
        radius: styles.radius,
        fill: new Fill({
          color: styles.fillColor
        }),
        stroke: new Stroke({ //边界样式
          color: styles.strokeColor,
          width: styles.strokeWidth
        })
      })
      // image: new Icon({
      //   anchor: [0.5, 0.5],
      //   anchorOrigin: 'top-left',
      //   scale: 0.3,
      //   imgSize: [50, 50],
      //   src: Gstyle.svgToImg('toolsIcon',20,'red')
      // })
    });
    return pointStyles;
  },
  styleCacheIndexPolygon: function (styles,classify) {
    if (!Gstyle.isJSON(styles)){
      return new Style({
        fill: new Fill({
          color: Gstyle.styleColor[classify]
        }),
        stroke: new Stroke({
          color: Gstyle.styleColor[classify],
          width: 2
        })
      });
    }
    styles = JSON.parse(styles);
    var polygonStyles = new Style({
      fill: new Fill({
        color: styles.fillColor
      }),
      stroke: new Stroke({
        color: styles.strokeColor,
        width: styles.strokeWidth
      })
    });
    return polygonStyles;
  },
  styleCacheIndexLineString: function (styles,classify) {
    if (!Gstyle.isJSON(styles)){
      return new Style({
        stroke: new Stroke({
          color: Gstyle.styleColor[classify],
          width: 2
        })
      });
    }
    styles = JSON.parse(styles);
    var polygonStyles  = new Style({
      stroke: new Stroke({
        color: styles.strokeColor,
        width: styles.strokeWidth
      })
    });
    return polygonStyles;
  },
  //鸟类(根据字典值类型)
  styleBirds: function () {
    let strokeColor = '#ff00ff';
    let strokeWidth = 1;
    var birds = {};
    for (let i = 0; i < Gstyle.styleColor.length ; i++) {
      birds[i] = new Style({
        image: new Circle({
          radius: 5,
          fill: new Fill({
            color: Gstyle.styleColor[i]
          }),
          stroke: new Stroke({ //边界样式
            color: strokeColor,
            width: strokeWidth
          })
        })
      });
    }
    return birds;
  },
  //鸟类(根据字典名称)
  styleBirdsDictionary: function (birdsInfo) {
    let strokeColor = '#ff00ff';
    let strokeWidth = 1;
    var birds = {};
    for (let i = 0; i < Gstyle.styleColor.length ; i++) {
      birds[birdsInfo[i+1]] = new Style({
        image: new Circle({
          radius: 5,
          fill: new Fill({
            color: Gstyle.styleColor[i]
          }),
          stroke: new Stroke({ //边界样式
            color: strokeColor,
            width: strokeWidth
          })
        })
      });
    }
    return birds;
  },
  selected: function(feature) {
    return new Style({
      stroke: new Stroke({
        color: '#ffffff',
        width: 1,
      }),
      fill: new Fill({
        color: '#ffff00',
      }),
    })
  },
  selectedArea: function(feature) {
    return new Style({
      stroke: new Stroke({
        color: '#ff00ff',
        width: 3,
      }),
      fill: new Fill({
        color: '#ffff00',
      }),
    })
  },
  selectedPnt: function (feature) {
    return new Style({
      image: new Circle({
        radius: 7,
        fill: new Fill({
          color: '#ffff00'
        }),
        stroke: new Stroke({
          color: '#ff00ff',
          width: 3
        })
      })
    });
  },
  selectedLine: function (feature) {
    return new Style({
      stroke: new Stroke({
        color: '#ff00ff',
        width: 4
      })
    });
  },
  svgToImg: function(fontClass, size, color, fontFamily = 'IconFont') {
    let canvas = document.createElement('CANVAS')
    canvas.width = size
    canvas.height = size
    let ctx = canvas.getContext('2d')

    let span = document.createElement('SPAN')
    span.className = fontClass
    document.body.appendChild(span)
    let content = window.getComputedStyle(span, '::before').content

    ctx.fillStyle = color;
    ctx.font = `${size - 2}px ${fontFamily}`;

    ctx.textAlign = 'center'
    ctx.fillText(content, size / 2, size - 4);
    let img = canvas.toDataURL('base64')
    document.body.removeChild(span)
    return img;
  }
}
export default Gstyle;
